import type { ProFormInstance } from '@ant-design/pro-form';
import { DrawerForm, ProFormTextArea } from '@ant-design/pro-form';
import { Col, Row } from 'antd';
import React, { useRef } from 'react';

type FormProps = {
  visible: boolean;
  current: API.BlacklistDevice | undefined;
  onCancel: () => void;
  onSubmit: (values: API.BlacklistDevice) => Promise<void>;
};

const Form: React.FC<FormProps> = (props) => {
  const { visible, current, onCancel, onSubmit } = props;
  if (!visible) {
    return null;
  }

  let defaultCurrent: Partial<API.BlacklistDevice> | undefined = undefined;
  if (!current) {
    defaultCurrent = {};
  }

  const formRef = useRef<ProFormInstance>();

  const handleFormSubmit = async (record: API.BlacklistDevice) => {
    onSubmit(record);
  };

  return (
    <DrawerForm<API.BlacklistDevice>
      open={visible}
      autoFocusFirstInput
      width={800}
      title={`${current ? '编辑' : '添加'}蜜罐设备`}
      initialValues={current ? current : defaultCurrent}
      formRef={formRef}
      //preserve={false}
      //trigger={<>{children}</>}
      onFinish={handleFormSubmit}
      drawerProps={{
        onClose: onCancel,
        //destroyOnClose: true,
        maskClosable: false,
      }}
    >
      <Row gutter={24}>
        <Col span={24}>
          <ProFormTextArea
            name="deviceid"
            label="设备ID(多项换行)"
            fieldProps={{ rows: 30 }}
          />
        </Col>
      </Row>
    </DrawerForm>
  );
};

export default Form;
